<script setup lang="ts">
import type { CategoryItem } from '@/api/types/student'
import type { StudentUnitCategoryItem, UnitCardProps } from '../type'
import { formatNumberWithNull } from '@/utils/format'
import { computed, ref } from 'vue'
import UnitSelectGridItem from './UnitSelectGridItem.vue'

const props = defineProps<UnitCardProps>()

const emit = defineEmits<{
  (e: 'studyItemTap', item: CategoryItem): void
  (e: 'changeUnit'): void
}>()
const isExpanded = ref(true)
function toggleExpand() {
  isExpanded.value = !isExpanded.value
}

function handleGridItem(item: CategoryItem) {
  emit('studyItemTap', item)
}

// 切换单元
function handleChangeUnit() {
  emit('changeUnit')
}

const categories = computed<StudentUnitCategoryItem[]>(() => {
  return [
    {
      title: '',
      items: [
        {
          isDone: props.unitData.shorthandNum === props.unitData.totalNum,
          title: '单词学习',
          progress: `${formatNumberWithNull(props.unitData.shorthandNum)}/${props.unitData.totalNum}`,
          icon: 'study-icon',
        },
        {
          title: '单词检查',
          progress: `${props.unitData.examineScore}%`,
          icon: 'inspect-icon',
        },
      ],
    },
  ]
})
</script>

<template>
  <view class="unit-card">
    <!-- 卡片头部 -->
    <view class="card-header" :class="{ expanded: isExpanded }" @tap="toggleExpand">
      <view class="header-left">
        <view class="unit-icon">
          <!-- 单元图标占位 -->
          <text class="progress-text-title">
            已学
          </text>
          <view class="progress-text">
            {{ formatNumberWithNull(unitData.shorthandNum) }}/{{ unitData.totalNum }}
          </view>
        </view>
        <view class="unit-info">
          <view class="unit-title">
            {{ unitData.name }}
            <view class="down-icon">
              <uni-icons
                type="up" size="16" :color="isExpanded ? '#fff' : '#D9D9D9'"
                :class="{ expanded: isExpanded }"
              />
            </view>
          </view>
          <view class="unit-subtitle">
            {{ unitData.subhead }}
          </view>
        </view>
      </view>

      <view class="header-right" @click.stop="handleChangeUnit">
        <view class="expand-icon" :class="{ expanded: isExpanded }">
          <!-- 展开/收起图标占位 -->
          <uni-icons type="right" size="16" :color="isExpanded ? '#fff' : '#C4C4C4'" />
        </view>
      </view>
    </view>

    <!-- 展开内容 -->
    <view v-show="isExpanded" class="card-content">
      <view v-for="(category, index) in categories" :key="index" class="category-section">
        <view v-if="category.title" class="category-title">
          <view class="category-icon">
            <!-- 分类图标占位 -->
          </view>
          <text>{{ category.title }}</text>
        </view>
        <view class="category-items">
          <UnitSelectGridItem
            v-for="(item, itemIndex) in category.items" :key="itemIndex" :icon="item.icon"
            :progress="item.progress"
            :is-done="item.isDone"
            @click="handleGridItem(item)"
          >
            <template #title>
              {{ item.title }}
            </template>
          </UnitSelectGridItem>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.unit-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
}

.card-header {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .down-icon {
        display: inline-block;

        .uni-icons {
            transition: transform 0.3s;
        }

        .expanded {
            transform: rotate(180deg);
            display: block;
        }
    }

    &.expanded {
        border-bottom: 2rpx solid #f5f5f5;
        background-color: $uni-color-primary;
        color: #fff;

        .unit-subtitle {
            color: #fff;
        }

        .unit-icon {
            background-color: #fff;
        }
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.unit-icon {
    width: 100rpx;
    height: 100rpx;
    background: url('@/static/images/unit/hlbg.png') no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    font-size: 24rpx;
    padding-top: 16rpx;
    box-sizing: border-box;
}

.unit-icon {
    .progress-text {
        transform: scale(.8);
        margin-top: -6rpx;
    }

    .progress-text-title {
        font-size: 20rpx;
    }

}

.unit-info {
    .unit-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
        padding-right: 10rpx;
    }

    .unit-subtitle {
        font-size: 24rpx;
        color: #666;
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16rpx;
    cursor: pointer;

    .progress-text {
        font-size: 28rpx;
        color: #666;
    }

    .expand-icon {
        width: 42rpx;
        height: 42rpx;
        border: 1px solid #F1F1F1;
        display: flex;
        align-items: center;
        border-radius: 50%;
        justify-content: center;

    }

}

.card-content {
    padding: 14rpx 20rpx;
    padding-top: 30rpx;
}

.category-section {
    margin-bottom: 30rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.category-title {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 16rpx 0;
    font-size: 28rpx;
    font-weight: bold;

    .category-icon {
        width: 6rpx;
        border-radius: 8rpx;
        height: 20rpx;
        background-color: $uni-color-primary;
    }
}

.category-items {
    display: flex;
    flex-wrap: wrap;
    gap: 40rpx;
}
</style>
